<template>
    <el-container class="page-container">
      <!-- 顶部导航 -->
      <div class="header">
        <div class="logo-container">
          <img
            src="https://img0.baidu.com/it/u=2631990995,2997068474&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=707" 
            alt="Logo"
            class="logo"
          />
          <span class="logo-text">小农旅社</span>
        </div>
      </div>
      <el-container>
        <!-- 左侧功能区域 -->
        <div class="left-section">
          <el-main class="login-container">
            <el-card class="login-card" shadow="hover">
              <h2 class="login-title">注册</h2>
              <el-form status-icon ref="ruleForm" label-width="80px" class="demo-ruleForm">
                <el-form-item label="账号" prop="account">
                  <el-input
                    type="text"
                    v-model="account"
                    placeholder="请输入账号"
                    autocomplete="off"
                    prefix-icon="el-icon-user"
                    style="width: 100%;"
                  />
                </el-form-item>
                <el-form-item label="昵称" prop="text">
                  <el-input
                    type="text"
                    v-model="name"
                    placeholder="请输入昵称"
                    prefix-icon="el-icon-user-solid"
                    style="width: 100%;"
                  />
                </el-form-item>
                <el-form-item label="密码" prop="pass">
                  <el-input
                    type="password"
                    v-model="pass"
                    placeholder="请输入密码"
                    autocomplete="off"
                    prefix-icon="el-icon-lock"
                    style="width: 100%;"
                  />
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                  <el-input
                    type="password"
                    v-model="checkPass"
                    placeholder="请确认密码"
                    autocomplete="off"
                    prefix-icon="el-icon-lock"
                    style="width: 100%;"
                  />
                </el-form-item>
                <el-form-item label="身份" prop="role">
                  <el-radio-group v-model="role">
                    <el-radio label="fmer">商家</el-radio>
                    <el-radio label="cmer">用户</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item>
                  <el-tooltip content="注册系统" placement="top">
                    <el-button
                      type="primary"
                      icon="el-icon-key"
                      @click="register"
                      style="margin-right: 200px;"
                      class="login-button"
                    >
                      注册
                    </el-button>
                  </el-tooltip>
                  <el-tooltip content="重置输入" placement="top">
                    <el-button
                      icon="el-icon-refresh"
                      @click="resetForm('ruleForm')"
                      style="margin-left: 20px;"
                      class="reset-button"
                    >
                      重置
                    </el-button>
                  </el-tooltip>
                </el-form-item>
              </el-form>
            </el-card>
          </el-main>
        </div>
        <!-- 右侧宣传区域 -->
        <div class="right-section">
          <div class="banner-content">
            <img
              src="https://n.sinaimg.cn/sinakd10111/244/w640h404/20200416/0be1-iskepxs5294793.jpg"
              alt="宣传插图"
              class="illustration"
            />
            <h2 class="slogan">"优选农品，从田间到餐桌"</h2>
            <p class="tagline">"分享农事点滴，传递丰收喜悦"</p>
          </div>
        </div>
      </el-container>
    </el-container>
</template>

  
  <script>
  import { login } from '@/api/login';
  import { register } from '@/api/register';
  export default {
    data() { 
      return {
        account: '',  // 账号
        name: '',
        pass: '',      // 密码
        checkPass: '',
        role: '', // 默认身份
      };
  
    },
    methods: {
      login() {
    const param = { uid: this.account, pwd: this.pass };
    login(param)
      .then(res => {
        if (res.data.code === 1) {
          localStorage.setItem('currentUser', JSON.stringify(res.data.data));
          if(res.data.data.position === 'cmer'){
            this.$router.push('/c/market');
          }else if(res.data.data.position === 'fmer'){
            this.$router.push('/f');
          }
          console.log(JSON.parse(localStorage.getItem('currentUser')).uid);
       
        } else {
          this.$message.error('登录失败，请检查账号和密码！');
        }
      })},
      register(){
        const param = { uid: this.account, pwd: this.pass,checkPwd: this.checkPass,name: this.name,position: this.role };
        register(param).then(res => {
            if(res.data.code ===1){
                this.$message.success('注册成功，请重新登录');
                this.$router.push('/login');
            }else{
                this.$message.error('注册失败，请检查账号和密码！');
            }
        })
      }
    
  }
  };
  </script>
  
  <style scoped>
  /* 页面整体布局 */
  .page-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f5f8fc;
  }
  
  /* 顶部导航样式 */
  .header {
    display: flex;
    align-items: center;
    padding: 20px;
    background-color: #ffffff;
  }
  
  /* 去除虚线 */
  .logo-container {
    display: flex;
    align-items: center;
  }
  
  .logo {
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }
  
  .logo-text {
    font-size: 20px;
    font-weight: bold;
    color: #333;
  }
  
  /* 左侧功能区样式 */
  .left-section {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
  }
  
  .login-card {
    width: 80%;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
  }
  
  .login-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
  }
  
  .register-link {
    font-size: 14px;
    color: #007bff;
    text-decoration: none;
  }
  
  .register-link:hover {
    text-decoration: underline;
  }
  
  /* 右侧宣传区样式 */
  .right-section {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(120deg, #e6f7ff, #ffffff);
  }
  
  .banner-content {
    text-align: center;
  }
  
  .illustration {
    width: 80%;
    margin-bottom: 20px;
  }
  
  .slogan {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
  }
  
  .tagline {
    font-size: 14px;
    color: #666;
  }
  </style>
  